<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mask {
            display: inline-block;
            width: 30px;
            height: 10px;
            background-color: #999;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <!-- <form action="">
        <input type="text" value="888888" id="input">

        <textarea name="" cols="30" rows="10" id="text">666666</textarea>

        <button id="btn">提交</button>
    </form> -->

    <form action="" id="fm">
        账号<input type="text" id="text"><span id="content"></span><br>
        密码<input type="password" id="pwd">
        <span class="mask"></span><span class="mask"></span><span class="mask"></span>
        <br>

        麻辣香锅<input type="checkbox" name="" id="" value="malaxiangguo">
        口味虾<input type="checkbox" name="" id="">
        <!-- <button id="btn">提交</button> -->
        <input type="button" value="提交" id="btn">
    </form>

    <script>

        // let input=document.getElementById('input');
        // let text=document.getElementById('text');
        // let btn=document.getElementById('btn');

        // btn.onclick=function(event){
        //     event.preventDefault();
        //     console.log(input.value);
        //     console.log(text.value);
        //     console.log(text.innerHTML);
        //     text.innerHTML='xvcjhdvabksnlck';

        // }

        //====== 表单事件 ======

        //在提交按钮之后，验证账号（6～12数字或字母）和
        //密码（数字字母下划线6～8）是否符合规范，符合就可以提交，
        //否则提示有错
        let fm = document.getElementById('fm');
        let text = document.getElementById('text');
        let pwd = document.getElementById('pwd');
        let btn = document.getElementById('btn');
        let content = document.getElementById('content');
        let masks = document.getElementsByClassName('mask');

        // fm.onsubmit = function (event) {
        //     //脱字符
        //     let reg1=/^[0-9A-Za-z]{6,12}$/
        //     let reg2=/^[\w]{6,8}$/

        //     if(reg1.test(text.value)&&reg2.test(pwd.value)){
        //         alert('提交成功')
        //     }else{
        //         alert('格式有误')
        //         event.preventDefault()
        //     }
        // }

        // btn.onclick = function () {
        //     let reg1 = /^[0-9A-Za-z]{6,12}$/
        //     let reg2 = /^[\w]{6,8}$/
        //     if (reg1.test(text.value) && reg2.test(pwd.value)) {
        //         alert('提交成功')
        //         fm.submit();
        //     } else {
        //         alert('格式有误')
        //     }
        // }

        text.onblur = function (event) {
            let reg3 = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if (reg3.test(event.target.value)) {
                content.innerHTML = '✅验证通过'
            } else {
                content.innerHTML = '❌电话号码格式不正确'
            }

        }

        pwd.addEventListener('input', function (event) {
            let length = event.target.value.length;
            if (length >= 12) {
                masks[0].style.backgroundColor = 'red';
                masks[1].style.backgroundColor = 'orange';
                masks[2].style.backgroundColor = 'green';
            } else if (length >= 9) {
                masks[0].style.backgroundColor = 'red';
                masks[1].style.backgroundColor = 'orange';
                masks[2].style.backgroundColor = '#999';

            } else if (length >= 1) {
                masks[0].style.backgroundColor = 'red';
                masks[1].style.backgroundColor = '#999';
                masks[2].style.backgroundColor = '#999';

            } else {
                masks[0].style.backgroundColor = '#999';
                masks[1].style.backgroundColor = '#999';
                masks[2].style.backgroundColor = '#999';
            }


        })



        fm.onchange=function(event){
            console.log('事件被触发了');
            console.log(event.target.value);
            //多选框的value属性被省略时，默认值是on
        }



    </script>
</body>

</html>